<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" label-width="80px" class="hx-form" hide-required-asterisk :rules="rules">
      <el-form-item label="编号：" prop="code">
        <el-input v-model="data.code" class="detail-input" />
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="data.name" class="detail-input" />
      </el-form-item>
      <el-form-item v-if="!editId" label="密码：" prop="password">
        <el-input v-model="data.password" type="password" class="detail-input" />
      </el-form-item>
      <el-form-item label="部门：" prop="department_id">
        <v-select v-model="data.department_id" action="departmentList" class="detail-input" />
      </el-form-item>
      <el-form-item label="职务：" prop="post">
        <el-input v-model="data.post" class="detail-input" />
      </el-form-item>
      <el-form-item label="手机：" prop="mobile">
        <el-input v-model="data.mobile" class="detail-input" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/admin/admin'
import VSelect from '@/components/select'

export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: { VSelect },
  data() {
    return {
      data: {},
      departmentList: [],
      title: '',
      editId: '',
      value: '',
      rules: {
        code: { required: true, message: '请输入编号', trigger: 'change' },
        name: { required: true, message: '请输入姓名', trigger: 'change' },
        password: { required: true, message: '请输入职务', trigger: 'change' },
        department_id: { required: true, message: '请选择部门', trigger: 'change' },
        post: { required: true, message: '请输入职务', trigger: 'change' },
        mobile: { required: true, message: '请输入手机', trigger: 'change' }
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '人员详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增人员'
    }
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('admin')
    },
    cancel() {
      this.goUrl('/admin')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            this.add(API, this.data, '新增成功')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.add-form{
  background-color: #fff;
  border-radius: 5px;
}
.hx-form{
  padding: 0 60px 80px;
  margin-top: 40px;
}
.nb-tittle{
  padding: 30px 60px  0;
  font-size: 24px;
  font-weight: 400;
  color: #000000;
}

</style>
